<template>
    <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import npmdepgraph from "@/data/npmdepgraph.min10"

export default {
    name: "AddUIEchartsGraph.component",
    components: {Maptalks},
    setup() {

        // ECharts"s chart creation
        function createChart(dom) {
            let myChart = echarts.init(dom);
            let option = {
                title: {},
                animationDurationUpdate: 1500,
                animationEasingUpdate: "quinticInOut",
                series: [
                    {
                        type: "graph",
                        layout: "none",
                        // progressiveThreshold: 700,
                        data: npmdepgraph.nodes.map(function (node) {
                            return {
                                x: node.x,
                                y: node.y,
                                id: node.id,
                                name: node.label,
                                symbolSize: node.size,
                                itemStyle: {
                                    color: node.color
                                }
                            };
                        }),
                        edges: npmdepgraph.edges.map(function (edge) {
                            return {
                                source: edge.sourceID,
                                target: edge.targetID
                            };
                        }),
                        emphasis: {
                            label: {
                                position: "right",
                                show: true
                            }
                        },
                        roam: true,
                        focusNodeAdjacency: true,
                        lineStyle: {
                            width: 0.5,
                            curveness: 0.3,
                            opacity: 0.7
                        }
                    }
                ]
            };
            myChart.setOption(option, true);
        }

        let mapOnLoadCB = (map) => {
            let chartDom = document.createElement("div");
            chartDom.style.cssText = "width:1300px; height:800px;";
            createChart(chartDom);

            let echartsUI = new maptalks.ui.UIMarker(map.getCenter(), {
                "draggable": true,
                "content": chartDom
            }).addTo(map).show();
        };

        return {
            mapOnLoadCB
        }
    }
}
</script>

<style scoped>

</style>
